<template>
	<view class="page">
		<u-navbar
			title="代金券详情"
			leftText="返回"
			:placeholder="true"
			:safeAreaInsetTop="true"
			bgColor="#2a82d1"
			leftIconColor="#FFFFFF"
			leftIconSize="42rpx"
			autoBack
			:titleStyle="{color:'#FFFFFF'}"
		>
		</u-navbar>
		<view class="main">
			<view class="headline">
				{{ recordInfo.coupon_name }}
			</view>
			<view class="qr-wrap u-flex">
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="recordInfo.id" :options="{ margin: 10, size: 150 }"></uqrcode>
				
				<view class="price">
					<text class="nums">{{ recordInfo.coupon_value }}元</text>
				</view>
				
				<view class="status-go" v-if="recordInfo.status != 1">{{ recordInfo.status_display }}</view>
			</view>
			
			<view class="qr-info u-flex">
				<view class="info-message">
					<view class="info-message__item u-flex">
						<view class="key">领取时间</view>
						<view class="val">{{ recordInfo.obtain_time }}</view>
					</view>
					<view class="info-message__item u-flex">
						<view class="key">过期时间</view>
						<view class="val">{{ recordInfo.expire_time }}</view>
					</view>
					
					<template v-if="recordInfo.use_type > 0">
						<view class="info-message__item u-flex">
							<view class="key">使用时间</view>
							<view class="val">{{ recordInfo.use_time }}</view>
						</view>
						<view class="info-message__item u-flex">
							<view class="key">使用方式</view>
							<view class="val">{{ recordInfo.use_type_display }}</view>
						</view>
					</template>
					
					<view class="info-message__item u-flex">
						<view class="key">使用规则</view>
						<view class="val">
							<rich-text :nodes="recordInfo.rdesc"></rich-text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="copyright">方天下旅游保留法律允许范围内的最终解释权</view>
	</view>
</template>

<script>
	import { getCouponRecordDetails } from '@/api/api.js'
	export default {
		data() {
			return {
				recordId: 0,
				recordInfo: {
					id: 0,
					coupon_name: '',
					coupon_value: '',
					obtain_time: '',
					expire_time: '',
					use_time_display: '',
					use_type_display: '',
					status: 1,
					status_display: ''
				}
			}
		},
		onLoad(options) {
			this.recordId = options.id || 0
			if ( this.recordId > 0 ) {
				this.loadData()
			}
		},
		onShow() {
			
		},
		watch: {
			
		},
		methods: {
			loadData() {
				getCouponRecordDetails(this.recordId).then(res => {
					this.recordInfo = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #2a82d1;
}
.page {
	background-color: #2a82d1;
	height: 100vh;
	overflow: hidden;
	.main {
		width: 710rpx;
		margin: 30rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		.headline {
			background-color: #f0f0f0;
			padding: 30rpx 0;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			color: #2a82d1;
			text-align: center;
			font-size: 32rpx;
		}
		.qr-wrap {
			align-items: center;
			justify-content: center;
			margin: 40rpx 0;
			flex-direction: column;
			position: relative;
			.price {
				margin-top: 20rpx;
				.nums {
					font-weight: bold;
					font-size: 66rpx;
					color: #ff5a5f;
				}
			}
			.status-go {
				text-align: center;
				background-color: #fff;
				color: #928785;
			}
		}
		.qr-info {
			flex-direction: column;
			align-items: center;
			padding: 30rpx;
			width: 600rpx;
			margin: 0 auto;
			.info-message {
				&__item {
					font-size: 30rpx;
					align-items: center;
					margin-bottom: 12rpx;
					align-items: baseline;
					.key {
						width: 140rpx;
					}
					.val {
						color: #666;
						flex: 1;
						white-space: pre-line;
						white-space: pre-wrap;
					}
				}
			}
		}
	}
	.copyright {
		width: 750rpx;
		position: fixed;
		left: 0rpx;
		bottom: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
	}
}
</style>
